<template>
	<view>
		<u-navbar :border-bottom="false" title="修改手机号" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: bgColor}">
		</u-navbar>
		<u-form class="container" :model="form" ref="mobileForm" :error-type="['toast']">
			<u-form-item label-position="top" label="校验码" :label-style="labelStyle" prop="validCode">
				<u-input v-model="form.validCode" placeholder="请输入校验码" />
				<ak-valid-code slot="right" ref="validCode" @changeCode="changeValidCode" />
			</u-form-item>
			<u-form-item label-position="top" label="当前手机号" :label-style="labelStyle" prop="oldPhoneNumber">
				<u-input v-model="form.oldPhoneNumber" placeholder="请输入当前手机号" />
			</u-form-item>
			<u-form-item label-position="top" label="验证码" :label-style="labelStyle" prop="oldSMSCode">
				<u-input v-model="form.oldSMSCode" placeholder="请输入验证码" :maxlength="6"/>
				<ak-get-code :mobile="form.oldPhoneNumber" :is-valid="isValid('oldPhoneNumber')" />
			</u-form-item>
			<u-form-item label-position="top" label="新手机号" :label-style="labelStyle" prop="newPhoneNumber">
				<u-input v-model="form.newPhoneNumber" placeholder="请输入新手机号" />
			</u-form-item>
			<u-form-item label-position="top" label="验证码" :label-style="labelStyle" prop="newSMSCode">
				<u-input v-model="form.newSMSCode" placeholder="请输入当验证码" :maxlength="6"/>
				<ak-get-code :mobile="form.newPhoneNumber" :is-valid="isValid('newPhoneNumber')" />
			</u-form-item>
		</u-form>
		<set-submit-bt @click="handleSubmit" />
	</view>
</template>

<script>
	import akValidCode from '@/components/ak-valid-code/index.vue'
	import akGetCode from '@/components/ak-get-code/index.vue'
	import SetSubmitBt from '@/components/set-submit-bt/index.vue'
	import { changeMobile } from '@/config/idsApi.js'
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		components: { akValidCode, akGetCode, SetSubmitBt },
		data() {
			return {
				validCode: '',
				form: {
					validCode: '',
					oldPhoneNumber: '',
					oldSMSCode: '',
					newPhoneNumber: '',
					newSMSCode: ''
				},
				rules: {
					oldSMSCode: [{ required: true, message: '旧手机验证码必填', trigger: 'blur'}],
					newSMSCode: [{ required: true, message: '新手机验证码必填', trigger: 'blur'}],
					oldPhoneNumber: [
						{ required: true, message: '请输入旧手机号', trigger: ['blur'] },
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '旧手机号码不正确',
							trigger: ['blur'],
						}
					],
					newPhoneNumber: [
						{ required: true, message: '请输入新手机号', trigger: ['blur'] },
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '新手机号码不正确',
							trigger: ['blur'],
						}
					],
					validCode: [
						{ required: true, message: '校验码必填', trigger: 'blur'},
						{
							// 自定义验证
							validator: (rule, value, callback) => {
								return this.validCode.toLowerCase() == value.toLowerCase()
							},
							message: '校验码错误',
							trigger: 'blur'
						}
					],
				},
				labelStyle: {
					fontSize: '30rpx',
				},
				buttonStyle: {
					height: '90rpx',
					color: '#FFFFFF',
					background: this.linearGradient
				}
			}
		},
		onReady() {
			this.$refs.mobileForm.setRules(this.rules);
			this.$refs.validCode.init()
		},
		computed:{
			...mapState(useUserStore, {userlogout: 'logout'})
		},
		methods: {
			isValid(field) {
				let obj = {
					isSend: true,
					msg: ''
				}
				let isValid = this.validCode.toLowerCase() == this.form.validCode.toLowerCase()
				let isMobile = this.$u.test.mobile(this.form[field])
				if (!isMobile) {
					obj = {
						isSend: false,
						msg: field == 'oldPhoneNumber' ? '旧手机号不正确' : '新手机号不正确'
					}
				}
				if (!isValid) {
					obj = {
						isSend: false,
						msg: '校验码错误'
					}
				}
				return obj
			},
			handleSubmit() {
				this.$refs.mobileForm.validate(async (valid) => {
					if (!valid) return;
					// delete this.form.validCode
					const res = await changeMobile(this.form)
					await this.$http.post('api/User/ChangePhoneNumber', res.data)
					this.userlogout()
					this.$u.toast(res.erroMessage)
					this.$mHelper.delayedJump('/pages/mine/index', 'reLaunch')
				})
			},
			changeValidCode(code) {
				this.validCode = code
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.container {
		padding: 0rpx 70rpx;
	}
	::v-deep .u-form-item--right__content {
		align-items: flex-end;
	}
</style>
